<template>
	<view>
		<view class="p30">
			<text class="f36 bold">{{deviceData.nickName}}</text>
			<view class="mtb40 mb30">
				<u-swiper :list="bannerList" :radius="10" :height="150" img-mode="scaleToFill"></u-swiper>
			</view>
			<view :class="!unLockGuard ? 'tip-green-wrapper':'tip-red-wrapper'">
				<u-icon :color="!unLockGuard ? '#22D0BE':'#F63C3A'" name="info-circle">
				</u-icon>
				<text class="ml10">{{tipMessage}}!</text>
			</view>
			<view class="card-shadow-box plr30tb20">
				<slide-unlock v-if="!unLockGuard && carStatus!=''" :disabled="guardDisabled" ref="slideUnlock"
					:status="getTipStatus ?'status-runing':(tipMessage == '允许启动'? 'status-normal':'status-danger')"
					label="开启防盗" @result="handleSlideResult($event, 1)">
				</slide-unlock>
				<slide-lock v-if="unLockGuard && carStatus!=''" :disabled="guardDisabled" ref="slidelock"
					:status="getTipStatus ?'status-runing':(tipMessage == '允许启动'? 'status-normal':'status-danger')"
					:init-x="lockInitXGuard" label="关闭防盗" @result="handleLockResult($event, 0)">
				</slide-lock>
			</view>
		</view>
		<view class="guard-tip-wrapper" v-if="isKnow">
			<view class="tip">
				<view class="text">
					建议仅在车辆被盗或长期停放车辆等紧急情况下，打开防盗功能，打开该功能后车辆将被禁止启动！
				</view>
				<view class="btn" @click="isKnow = false">知道了</view>
			</view>

		</view>

	</view>
</template>

<script>
	import SlideUnlock from "@/components/slide-unlock";
	import SlideLock from "@/components/slide-lock";
	import {
		send4GControlAPI,
		getCarStatusAPI
	} from "@/api/api/communicate"
	import {
		saveLogAPI
	} from "@/api/api/car.js"
	import {
		getBannerAPI
	} from "@/api/api/my"
	import {
		startOperateBluetooth,
	} from "@/static/bluetooth/core.js"
	import {
		getStoreSyncUtil
	} from "@/utils/store.js"
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			SlideUnlock,
			SlideLock
		},
		data() {
			return {
				bannerList: [
					'https://iot-device-saas.oss-cn-shenzhen.aliyuncs.com/public/5.png',
					'https://iot-device-saas.oss-cn-shenzhen.aliyuncs.com/public/4.png',
					'https://iot-device-saas.oss-cn-shenzhen.aliyuncs.com/public/6.png',
				],
				lockInitXGuard: 0,
				unLockGuard: 0,
				carStatus: '',
				guardTimerId: '',
				isKnow: true,
				guardDisabled: false,
				tipMessage: "允许启动", //提示文本

			}
		},
		computed: {
			...mapState(["loginUser", "deviceData", "guardDataPoint", "initxWidth", "isConnected", "targetCarStatus"]),
			getTipStatus() {
				return this.tipMessage.indexOf('下发中') != -1
			}
		},
		//当未连接蓝牙发的指令为4G指令时监听到的变化，当上报上来的指令和用户目标指令一致时，说明指令已经下发
		watch: {
			"guardDataPoint": {
				handler(guardDataPoint) {
					this.loadCarStatus(guardDataPoint, false);
				},
				deep: true,
			},
		},
		onLoad() {
			this.loadCarStatus(this.guardDataPoint);
			getBannerAPI().then(([err, data]) => {
				if (err) return;
				let list = data.records;
				if (list.length) {
					let bannerList = [];
					list.forEach((item) => {
						bannerList.push(item.link);
					})
					this.bannerList = bannerList;
				}
			});

		},
		onUnload() {
			clearTimeout(this.guardTimerId);
			this.guardDisabled = false;
		},
		methods: {
			loadCarStatus(guardDataPoint, isInitLock = true) {
				//如果缓存里面有值，则取缓存里面的值
				if (!this.$validatenull(this.targetCarStatus[this.deviceData.id])) {
					this.carStatus = this.targetCarStatus[this.deviceData.id];
					//如果缓存里面的值和上报的状态不一致,则指令在下发中
					if (this.targetCarStatus[this.deviceData.id] == guardDataPoint.carStatus) {
						delete this.targetCarStatus[this.deviceData.id];
						this.$store.commit("setTargetCarStatus", this.targetCarStatus);
						console.log("===", this.targetCarStatus);
						clearTimeout(this.guardTimerId);
						this.guardDisabled = false;
						this.tipMessage = this.carStatus == 1 ? '禁止启动' : '允许启动';
					} else {
						this.tipMessage = `${this.carStatus == 1 ? '禁止启动' : '允许启动'}指令下发中`;
					}
				} else {
					clearTimeout(this.guardTimerId);
					this.guardDisabled = false;
					this.carStatus = guardDataPoint.carStatus;
					this.tipMessage = this.carStatus == 1 ? '禁止启动' : '允许启动';
				}
				//if(isInitLock){
				this.initCardStatus();
				//}
			},
			initCardStatus() {
				if (this.carStatus == 2) {
					this.unLockGuard = false;
					this.lockInitXGuard = 0;
				} else {
					this.unLockGuard = true;
					this.lockInitXGuard = this.initxWidth;
				}
			},
			parsePacketCallback(flag, dataType) {
				//改变状态
				if (flag) {
					this.$store.commit("setIndexDataPoint", {
						...this.$store.state.indexDataPoint,
						carStatus: dataType == 1001 ? 1 : 2
					});

					this.$store.commit("setGuardDataPoint", {
						carStatus: dataType == 1001 ? 1 : 2
					});

					this.carStatus = dataType == 1001 ? 1 : 2;

					this.tipMessage = dataType == 1001 ? '禁止启动' : '允许启动';
				}

				uni.hideLoading();
				uni.showToast({
					title: flag ? "操作成功" : "操作失败",
					icon: 'none',
					mask: true
				})
				if (flag) {
					let params = {
						logType: 5,
						customerId: this.loginUser.user_id,
						cardId: this.deviceData.id,
						businessId: this.deviceData.id,
						carName: this.deviceData.nickName,
						logAssort: 2,
						content: dataType == 1001 ? "防盗锁车" : "防盗解锁"
					};
					saveLogAPI(params)
				}
			},
			handleSlideResult(e, lockType) {
				if (!e.flag || this.guardDisabled) {
					return;
				}
				this.carStatus = 1;
				this.lockInitXGuard = e.x
				// this.unLockGuard = e.flag
				this.unLockGuard = lockType
				if (this.isConnected) {
					delete this.targetCarStatus[this.deviceData.id];
					this.$store.commit("setTargetCarStatus", this.targetCarStatus);
					startOperateBluetooth("防盗锁车中", 1001, this.parsePacketCallback, () => {
						this.carStatus = 2;
						this.initCardStatus();
					}, this.vibrationData)
				} else {
					send4GControlAPI({
						deviceId: this.deviceData.id,
						commandCode: "LOCK_CAR"
					}).then(([err, data]) => {
						if (err) return;
						this.tipMessage = "禁止启动指令下发中";
						this.targetCarStatus[this.deviceData.id] = 1;
						this.$store.commit("setTargetCarStatus", this.targetCarStatus);
						this.guardDisabled = true;
						getCarStatusAPI(this.deviceData.id);
						this.guardTimerId = setTimeout(() => {
							this.guardDisabled = false;
						}, 10000)
					});
				}

			},
			handleLockResult(e, lockType) {
				if (!e.flag || this.guardDisabled) {
					return;
				}
				// this.unLockGuard = !e.flag
				this.carStatus = 2;
				this.unLockGuard = lockType
				if (this.isConnected) {
					delete this.targetCarStatus[this.deviceData.id];
					this.$store.commit("setTargetCarStatus", this.targetCarStatus);
					startOperateBluetooth("防盗解锁中", 1002, this.parsePacketCallback, () => {
						this.carStatus = 1;
						this.initCardStatus();
					}, this.vibrationData)
				} else {
					send4GControlAPI({
						deviceId: this.deviceData.id,
						commandCode: "UNLOCK_CAR"
					}).then(([err, data]) => {
						if (err) return;
						this.tipMessage = "允许启动指令下发中";
						this.targetCarStatus[this.deviceData.id] = 2;
						this.$store.commit("setTargetCarStatus", this.targetCarStatus);
						this.guardDisabled = true;
						getCarStatusAPI(this.deviceData.id);
						//如果过来10s指令还有，说明设备在休眠中
						this.guardTimerId = setTimeout(() => {
							this.guardDisabled = false;
						}, 10000)

					});
				}


			},
		}
	}
</script>

<style scoped lang="scss">
	.guard-tip-wrapper {
		position: fixed;
		bottom: 50upx;
		padding: 20upx;

		.tip {
			background-color: rgba(0, 0, 0, 0.7);
			border-radius: 20upx;
			padding: 20upx 20upx 40upx 20upx;
			font-size: 24upx;
			line-height: 1.8;
			position: relative;

			.text {
				color: #fff;
			}

			.btn {
				background: #FFFFFF;
				border-radius: 24upx;
				font-size: 20upx;
				padding: 4upx 18upx;
				display: inline-block;
				position: absolute;
				right: 20upx;
				bottom: 18upx;
				color: #000003;
			}
		}

	}

	.tip-green-wrapper {
		display: flex;
		align-items: center;
		background-color: rgba(34, 208, 190, 0.16);
		color: #22D0BE;
		border-radius: 16upx;
		padding: 16upx 16upx;
		font-size: 24upx;
		margin-bottom: 30upx;
	}

	.tip-red-wrapper {
		display: flex;
		align-items: center;
		background-color: rgba(246, 60, 58, 0.16);
		color: #F63C3A;
		border-radius: 16upx;
		padding: 16upx 16upx;
		font-size: 24upx;
		margin-bottom: 30upx;
	}
</style>
